<template>
  <view class="ai-draw">
    <wd-backtop :scrollTop="recordScrollTop" custom-class="scroll-top" @tap="goTop" />
    <tabs-header v-model:currentTab="currentTab" />

    <scroll-view
      :scroll-top="scrollTop"
      scroll-y
      class="scroll-page"
      :scroll-with-animation="true"
      @scrolltolower="onRefresh"
      @scroll="scroll"
    >
      <view class="w-full p-3 box-border">
        <!-- 工作流 -->
        <work-flow-models v-show="currentTab === CreationTypeEnum.WORK_FLOW" />
      </view>
      <!-- 创作历史 -->
      <wd-divider content-position="left" custom-class="divider"> 创作历史 </wd-divider>
      <creating-history ref="historyRef" />
    </scroll-view>
  </view>
</template>
<script lang="ts" setup>
import { CreationTypeEnum } from "@/utils/enums";
import TabsHeader from "./components/TabsHeader.vue";
import WorkFlowModels from "./components/WorkFlowModels.vue";
import CreatingHistory from "./components/CreatingHistory.vue";
import UseBackTop from "@/hooks/useBackTop";

const currentTab = ref<string>(CreationTypeEnum.WORK_FLOW);

// 回到顶部
const { scrollTop, recordScrollTop, scroll, goTop } = new UseBackTop();

const historyRef = ref();
// 上拉加载
const onRefresh = () => {
  historyRef.value?.onRefresh();
};
</script>
<style lang="scss" scoped>
.ai-draw {
  @apply h-[100vh] overflow-hidden;
  .scroll-page {
    @apply relative w-full  box-border pb-3;
    height: calc(100vh - 80rpx);
  }

  :deep(.wd-tabs__line) {
    background-color: #c13432 !important;
  }
  :deep(.wd-divider) {
    padding: 0 24rpx;
  }
  :deep(.wd-search) {
    padding: 0 24rpx 24rpx 24rpx !important;
  }
}
</style>
